<template>
  <transition name="slide">
    <div class="add-song" v-show="showFlag" @click.stop>

      <!-- 头部 -->
      <div class="header">
        <div class="close" @click="hide">
          <i class="icon-back"></i>
        </div>
        <h1 class="title">添加歌曲到列表</h1>
      </div>

      <!-- 搜索框 -->
      <div class="search-box-wrapper">
        <search-box ref="searchBox" placeholder="搜索歌曲" @query="onQueryChange"></search-box>
      </div>

      <div class="shortcut" v-show="!query">
        <!-- tab栏 -->
        <switches :switches="switches" :currentIndex="currentIndex" @switch="switchItem"></switches>
        <!-- 最近播放与搜索历史切换主体盒子 -->
        <div class="list-wrapper">

          <!-- 最近播放 -->
          <scroll class="list-scroll" :data="playHistory" v-if="currentIndex === 0" ref="songList">
            <div class="list-inner">
              <song-list :songs="playHistory" @select="selectSong"></song-list>
            </div>
          </scroll>

          <!-- 搜索历史 -->
          <scroll class="list-scroll" :data="searchHistory" :refreshDelay="refreshDelay" v-if="currentIndex === 1" ref="searchList">
            <div class="list-inner">
              <search-list :searches="searchHistory" @select="addQuery" @delete="deleteSearchHistory"></search-list>
            </div>
          </scroll>

        </div>
      </div>

    <!-- 检索结果 -->
    <div class="search-result" ref="searchResult" v-show="query">
      <suggest :query="query" :showSinger="showSinger" @listScroll="blurInput" @select="selectSuggest" ref="suggest"></suggest>
    </div>

      <!-- 弹框提醒 -->
      <top-tip ref="topTip">
        <div class="tip-title">
          <i class="icon-ok"></i>
          <span class="text">{{songName}}</span>
        </div>
      </top-tip>

    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import SearchBox from 'base/search-box/search-box'
import Switches from 'base/switches/switches'
import Scroll from 'base/scroll/scroll'
import SongList from 'base/song-list/song-list'
import SearchList from 'base/search-list/search-list'
import { mapGetters, mapActions } from 'vuex'
import Song from 'common/js/song'
import TopTip from 'base/top-tip/top-tip'
import { searchMixin } from 'common/js/mixin'
import Suggest from 'components/suggest/suggest'
export default {
  mixins: [searchMixin],
  data () {
    return {
      showFlag: false, // 显示隐藏旗帜
      showSinger: false, // 不需要歌手
      currentIndex: 0,
      switches: [{ name: '最近播放' }, { name: '搜索历史' }],
      songName: ''
    }
  },
  computed: {
    ...mapGetters(['playHistory'])
  },
  methods: {
    show () {
      this.showFlag = true
      // 由于整个组件都是隐藏的 会出现无法滚动
      // 特么无法滚动  需要初始化 即使初始化第一次滑动没反应 需要20毫秒
      clearTimeout(this.name)
      this.name = setTimeout(() => {
        this.currentIndex === 0 ? this.$refs.songList.refresh() : this.$refs.searchList.refresh()
      }, 20)
    },
    hide () {
      this.showFlag = false
    },
    switchItem (index) {
      this.currentIndex = index
    },
    // 用户点击最近播放
    selectSong (item, index) {
      // console.log(item, index)
      // 点击第一首歌曲无效 因为播放的歌曲就是第一首
      if (index !== 0) {
        // 这个song具有song实列的所有属性 但不是实列对象
        // 我们需要实列化
        this.insertSong(new Song(item))
        this.songName = item.name
        this.showTip()
      }
    },
    // 用户点击搜索结果
    selectSuggest (item) {
      this.saveSearch()
      this.showTip()
      this.songName = item.name
    },
    showTip () {
      this.$refs.topTip.show()
    },
    ...mapActions(['insertSong'])
  },
  components: { SearchBox, Switches, Scroll, SongList, SearchList, TopTip, Suggest }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import '~common/stylus/variable';
  .add-song
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: $color-background;

    &.slide-enter-active, &.slide-leave-active
      transition: all 0.4s;

    &.slide-enter, &.slide-leave-to
      transform: translate3d(100%, 0, 0);

    .header
      display flex;
      height 44px;
      .close
        position absolute;
        top 0;
        left 0;
        .icon-back
          display inline-block;
          color $color-theme;
          font-size 22px;
          padding 10px;
      .title
        height 100%;
        width 100%;
        text-align center;
        line-height 44px;
        font-size 18px;
    .search-box-wrapper
      padding 20px;
    .shortcut
      .list-wrapper
        position absolute;
        top 162px;
        bottom 0;
        width 100%;
        .list-scroll
          height 100%;
          overflow hidden;
          padding 0 20px;
    .search-result
      position absolute;
      top: 124px;
      bottom: 0;
      width: 100%;
    .tip-title
      width: 100%;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon-ok
        color: $color-theme;
        margin-right: 10px;
</style>
